import Vue from 'vue'

const component = {

  template: `
    <div :style="style">
     <slot name="header"></slot>
     <div>
       <slot name="footer1" :aaa="value" ccc="ccc123"></slot>
     <div>
       <slot name="footer2" :aaa="value" ccc="ccc123123"></slot>
     </div>
     </div>
    </div>
  `,
  data () {
    return {
      value: 'aaa123',
      style: {
        width: '200px',
        height: '200px',
        border: '1px solid #aaa'
      }
    }
  }
}

new Vue({
  components: {
    component2: component
  },
  el: "#app",
  template: `
  <div>
    <component2 >
    <span slot="header">123123</span> 
    <span slot="footer1" slot-scope="footer">footer1-{{footer.aaa}}</span> 
    <span slot="footer2" slot-scope="footer">footer2-{{footer.ccc}}</span> 
    </component2>
  </div>
  `
})
